import { createRenderer } from 'vue';
import {
    View,
    Image,
    Text,
    Comment,
    rpxToPx,
    cssValueToEnum,
    cssValueMatch,
    TaitankDirection,
    FlexDirection,
    FlexWrapMode,
    FlexAlign,
    CSSDirection,
    Dimension,
    PositionType,
    DisplayType,
    OverflowType,
    NodeType
} from "./base_view.js";

import { patchPropImpl } from "./patch_prop_impl.js";

// 非浏览器环境节点操作方法
const nodeOps = {
    createElement: (tag) => {
        console.log("createElement", tag);
        switch (tag) {
            case "view":
                let view = new View();
                return { tag, parent: null, children: [], props: {}, impl: view, elementText: "" };

            case "text":
                let text = new Text();
                return { tag, parent: null, children: [], props: {}, impl: text, elementText: "" };

            case "image":
                let image = new Image();
                console.log("create image")
                return { tag, parent: null, children: [], props: {}, impl: image, elementText: "" };

            case "v-if":
                let comment = new Comment();
                console.log("create image")
                return { tag, parent: null, children: [], props: {}, impl: comment, elementText: "" };

            default:
                return { tag, parent: null, children: [], props: {}, impl: new View(), elementText: "" };
        }
    },
    createText: (text) => {
        console.log("createText", text)
        const textImpl = new Text() // 假设这是平台原生文本对象
        // textImpl.text = text
        return {
            type: 'text',
            children: [],    // 必须包含children字段
            props: {},       // 必须包含props字段
            impl: textImpl   // 绑定底层对象
        }
    },
    createComment: (text) => {
        console.log("createComment", JSON.stringify(text))
        const commentImpl = new Comment();
        return {
            type: 'comment',
            parent: null,
            children: [],    // 必须包含children字段
            props: {},       // 必须包含props字段
            text: text,      // 注释文本内容
            impl: commentImpl       // 如果没有底层实现可以为null
        }
    },
    insert: (child, parent, anchor) => {
        if (!parent) {
            return;
        }
        child.parent = parent;
        if (anchor) {
            const index = parent.children.indexOf(anchor);
            console.log("find anchor, index of is ", index, ", anchor is: ", anchor);
            parent.children.splice(index, 0, child);
        } else {
            parent.children.push(child);
        }

        // 重新更新view在parent中的索引
        for (let index = 0; index < parent.children.length; index++) {
            if (parent.children[index].impl) {
                parent.children[index].impl.indexInParent = index;
            } else {
                console.error("error, bad index, or bad impl, insert, ", index, parent.children.length, parent.children);
            }
        }

        parent.impl.appendChild(child.impl);
    },
    remove: child => {
        if (child.parent) {
            let parent = child.parent;
            parent.impl.removeChild(child.impl);
            const index = parent.children.indexOf(child);
            if (index > -1) {
                parent.children.splice(index, 1);
            }

            // 重新更新view在parent中的索引
            for (let index = 0; index < parent.children.length; index++) {
                if (parent.children[index].impl) {
                    parent.children[index].impl.indexInParent = index;
                } else {
                    console.error("error, bad index, or bad impl,remove, ", index, parent.children.length, parent.children);
                }
            }
        }
    },
    parentNode: node => {
        // 返回父节点实现
        return node.parent;
    },
    nextSibling: node => {
        console.log("call nextSibling");
        const parent = node.parent;
        if (!parent) {
            console.log("parent null");
            return null; // 无父节点则无兄弟节点
        }
        console.log("nextSibling 1");
        const siblings = parent.children;
        const index = siblings.indexOf(node);
        console.log("nextSibling 2");
        // 检查索引有效性，返回下一个兄弟或 null
        const ret = index > -1 && index < siblings.length - 1
            ? siblings[index + 1]
            : null;
        console.log("nextSibling ", ret);
        return ret;
    },
    patchProp: (el, key, prevValue, nextValue, isSVG, prevChildren, instance = null, parentSuspense, unmountChildren) => {
        patchPropImpl(el, key, prevValue, nextValue, isSVG, prevChildren, instance, parentSuspense, unmountChildren);
    },
    setText: (node, text) => {
        console.log("setText", node, JSON.stringify(text))
    },
    setElementText: (el, text) => {
        console.log("setElementText", text);
        if (el.impl instanceof Text) {
            el.impl.setText(text);
        }
        el.elementText = text;
    },
    /**
    * 设置作用域ID（用于Scoped CSS）
    * @param el 目标元素
    * @param id 作用域ID
    */
    setScopeId: (el, id) => {
        console.log("setScopeId", el, id);
        // 在实际实现中，这里通常会将作用域ID添加到元素的属性或类名中
        el.props[id] = ""; // 简单实现，将作用域ID作为属性添加
        if (el.impl) {
            // 如果有底层实现对象，也需要设置作用域ID
            // 例如：el.impl.setAttribute(id, "");
        }
    },

    /**
     * 克隆节点
     * @param node 要克隆的节点
     * @param deep 是否深度克隆（包括子节点）
     * @returns 克隆后的新节点
     */
    // cloneNode: (node, deep = false) => {
    //     console.log("cloneNode", node, deep);
    //     // 创建新节点对象
    //     const clonedNode = {
    //         ...node,
    //         parent: null,
    //         props: { ...node.props },
    //         children: []
    //     };

    //     // 克隆底层实现对象
    //     if (node.impl && node.impl.cloneNode) {
    //         clonedNode.impl = node.impl.cloneNode(deep);
    //     } else {
    //         // 如果没有cloneNode方法，则创建新实例
    //         switch (node.tag) {
    //             case "view":
    //                 clonedNode.impl = new View();
    //                 break;
    //             case "text":
    //                 clonedNode.impl = new Text();
    //                 break;
    //             case "image":
    //                 clonedNode.impl = new Image();
    //                 break;
    //             default:
    //                 clonedNode.impl = new View();
    //         }
    //     }

    //     // 深度克隆子节点
    //     if (deep && node.children) {
    //         clonedNode.children = node.children.map(child => {
    //             const clonedChild = nodeOps.cloneNode(child, true);
    //             clonedChild.parent = clonedNode;
    //             return clonedChild;
    //         });
    //     }

    //     return clonedNode;
    // },

    // /**
    //  * 插入静态内容
    //  * @param content 静态内容HTML字符串
    //  * @param parent 父节点
    //  * @param anchor 锚点节点（插入位置）
    //  * @param isSVG 是否SVG命名空间
    //  * @param start 开始位置（用于部分插入）
    //  * @param end 结束位置（用于部分插入）
    //  * @returns 返回创建的节点数组
    //  */
    // insertStaticContent: (content, parent, anchor, isSVG, start, end) => {
    //     console.log("insertStaticContent", content,  start, end);

    //     // 在实际实现中，这里会解析HTML字符串并创建对应的节点
    //     // 这里简化实现，只处理文本内容

    //     // 创建文本节点
    //     const textNode = nodeOps.createText(content);
    //     nodeOps.insert(textNode, parent, anchor);

    //     // 返回创建的节点数组
    //     return [textNode];
    // }
};

export const { createApp } = createRenderer(nodeOps);